<template>
  <div class="page">
    <!--顶部-->
    <div class="flex justify-center" id="navigation">
      <span class="logo">非诚勿扰</span>
      <span class="username">{{ name }}</span>
      <el-dropdown style="position: absolute; right: 3%">
        <el-image class="userImage" :src="avatar"></el-image>
        <template #dropdown>
          <el-dropdown-menu style="background: #fcdd44">
            <el-dropdown-item @click="toPersonal()">个人中心</el-dropdown-item>
            <el-dropdown-item @click="toChatPage()">进入聊天</el-dropdown-item>
            <el-dropdown-item @click="toLogin()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!--轮播图-->
    <el-carousel
      :interval="3000"
      arrow="always"
      indicator-position="none"
      style="width: 100%"
      height="510px"
    >
      <el-carousel-item v-for="item in carouselData" :key="item">
        <div
          :style="{ backgroundImage: 'url(' + item.image + ')' }"
          id="elImage"
        >
          <!-- <span id="title">{{item.title}}</span>
            <span id="subTitle">{{item.subTitle}}</span> -->
        </div>
      </el-carousel-item>
    </el-carousel>

    <!--(三个热门主题)类型卡片-->
    <div class="typeCard" id="dd">
      <el-image
        :src="require('@/assets/sport2-11-22.png')"
        class="cardImage"
      ></el-image>
      <button class="cardButton" @click="getTypeScript(0)">Sport</button>
    </div>

    <div class="typeCard" id="ss">
      <el-image
        :src="require('@/assets/love-11-22.png')"
        class="cardImage"
      ></el-image>
      <button class="cardButton1" @click="getTypeScript(1)">Love</button>
    </div>

    <div class="typeCard" id="yy">
      <el-image
        :src="require('@/assets/350 x 350/game.png')"
        class="cardImage"
      ></el-image>
      <button class="cardButton2" @click="getTypeScript(2)">Play</button>
    </div>

    <!--占位符-->
    <div style="height: 420px"></div>

    <div class="flex flex-row" style="margin-left: 10.5%; margin-top: 80px">
      <div class="thread"></div>
      <span class="threadTitle">more</span>
      <div class="thread1"></div>
    </div>

    <!--占位符-->
    <div style="height: 80px"></div>

    <!--(四个次主题)类型卡片-->
    <div class="flex flex-row" style="height: 300px">
      <div
        class="flex flex-col"
        style="
          height: 380px;
          width: 260px;
          margin-left: 11%;
          margin-right: 2.5%;
          background-color: #fff;
        "
      >
        <el-image :src="require('@/assets/256 x 188/study.png')"></el-image>
        <div style="height: 130px">
          <div class="subText">LET US STUDY TOGETHER</div>
        </div>
        <div class="subButton">
          <span class="subButtonTitle" @click="getTypeScript(3)">Enter</span>
        </div>
      </div>
      <div
        class="flex flex-col"
        style="
          height: 380px;
          width: 260px;
          margin-right: 2.5%;
          background-color: #fff;
        "
      >
        <el-image
          :src="require('@/assets/256 x 188/competition.png')"
        ></el-image>
        <div style="height: 130px">
          <div class="subText">TEAMMATES IN COMPETITION</div>
        </div>
        <div class="subButton">
          <span class="subButtonTitle" @click="getTypeScript(4)">Enter</span>
        </div>
      </div>
      <div
        class="flex flex-col"
        style="
          height: 380px;
          width: 260px;
          margin-right: 2.5%;
          background-color: #fff;
        "
      >
        <el-image :src="require('@/assets/256 x 188/eat.png')"></el-image>
        <div style="height: 130px">
          <div class="subText">LET US EAT TOGETHER</div>
        </div>
        <div class="subButton">
          <span class="subButtonTitle" @click="getTypeScript(5)">Enter</span>
        </div>
      </div>
      <div
        class="flex flex-col"
        style="
          height: 380px;
          width: 260px;
          margin-right: 2.5%;
          background-color: #fff;
        "
      >
        <el-image
          :src="require('@/assets/256 x 188/unusual_thinking.png')"
        ></el-image>
        <div style="height: 130px">
          <div class="subText">SOME WONDERFUL THINKING</div>
        </div>
        <div class="subButton">
          <span class="subButtonTitle" @click="getTypeScript(6)">Enter</span>
        </div>
      </div>
    </div>

    <!--占位符-->
    <div style="height: 100px"></div>
  </div>
</template>

<script>
import img1 from "@/assets/banner-1.jpg";
import img2 from "@/assets/banner-2.jpg";
import img3 from "@/assets/banner-3.jpg";
import loginAPI from "@/api/loginAPI";
import commonAPI from "@/api/commonAPI";
export default {
  data() {
    return {
      carouselData: [
        {
          image: img1,
          title: "运动",
          subTitle: "xxxxxxx",
        },
        {
          image: img2,
          title: "学习",
          subTitle: "xxxxxxx",
        },
        {
          image: img3,
          title: "音乐",
          subTitle: "xxxxxxx",
        },
      ],

      userContent: {},

      url: "",

      scripts: "",

      avatar: this.$store.getters["user/getUserAvatar"],
      userData: "",
      name: "",
    };
  },
  created() {
    console.log(document.documentElement.clientWidth);
    this.getUserId();
    this.getUserInfo();
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    toChatPage() {
      this.$router.push("/chat");
    },

    /**
     * @description 获取用户相关信息
     */
    async getUserId() {
      await loginAPI.getUserId().then((res) => {
        console.log(res);
        this.userContent = res.data;
        if (!this.$socket.connected) {
          this.$socket.connect(res.data.id);
          this.$store.commit("user/setUserId", res.data.id);
        }
      });
    },
    //zyChanged
    async getUserInfo() {
      await loginAPI.getUserId().then((res) => {
        this.userData = res.data;
        this.getUserAvatar();
        this.getUserName();
      });
    },
    async getUserName() {
      this.name = this.userData.name;
      this.$store.commit("user/setUserName", this.name);
    },

    async getUserAvatar() {
      let avatarIcon = this.userData.icon;
      await commonAPI.download(avatarIcon).then((res) => {
        let binaryData = [];
        binaryData.push(res);
        this.avatar = window.URL.createObjectURL(new Blob(binaryData));
        this.$store.commit("user/setUserAvatar", this.avatar);
      });
    },

    toPersonal() {
      this.$router.push({
        path: "/personal",
        query: {
          userId: this.$store.getters["user/getUserId"],
        },
      });
    },

    /**
     * @description 根据栏目id获取对应便签
     */
    getTypeScript(id) {
      this.$router.push({
        path: "/market",
        query: {
          type: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.page {
  background-color: #eae9e7;
}
#dd {
  background: #e6c41c;
  background: linear-gradient(
    to bottom,
    #f5d11d 0%,
    #f3d10e 1%,
    #efcf1c 2%,
    #fccd0d 4%,
    #f7ca0d 5%,
    #f9cb1e 6%,
    #f7cb10 7%,
    #f8cc14 8%,
    #f0c40c 54%,
    #edc50c 55%,
    #e9c108 71%,
    #ecc008 78%,
    #e6be06 91%,
    #e9bd06 93%,
    #e8bc06 100%
  );
  color: #fff;
}
#ss {
  margin-left: 38%;
  background: #2ec66b;
  color: #fff;
  background: linear-gradient(
    to bottom,
    #2ec66b 0%,
    #2dc970 1%,
    #2ac96c 2%,
    #2bc76e 4%,
    #2bc869 5%,
    #2ac871 6%,
    #29c86c 7%,
    #28c76b 15%,
    #2bc76c 16%,
    #21bb61 73%,
    #1eb860 100%
  );
}
#yy {
  margin-left: 65%;
  color: #fff;
  background: #e97262;
  background: linear-gradient(
    to bottom,
    #e97262 0%,
    #ef6865 1%,
    #ed6c5f 2%,
    #f07162 4%,
    #f17062 5%,
    #eb6f67 6%,
    #ec6c5f 7%,
    #ec6b5e 18%,
    #eb5d4f 56%,
    #e95242 100%
  ); /* W3C */
}
#navigation {
  position: relative;
  height: 80px;
  background-color: #000000;
}
.logo {
  position: absolute;
  color: #fcdd44;
  font-size: 27px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 80px;
  font-family: "KaiTi";
  left: 9%;
}
.logo:hover,
.logo:focus {
  color: #ff720b;
}
.username {
  position: absolute;
  color: #f5eaeac6;
  line-height: 80px;
  font-size: 20px;
  font-family: "STXingkai";
  font-weight: lighter;
  right: 8%;
}
.parentList {
  color: #fcdd44;
  margin-top: 32%;
  font-size: 25px;
  font-weight: lighter;
  font-family: "SimSun";
}
.parentAvatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.messageList {
  color: #fcdd44;
  margin-top: 32%;
  font-size: 25px;
  font-weight: lighter;
  font-family: "SimSun";
}
.message {
  height: 30px;
  width: 30px;
  margin-top: 7px;
}
.userImage {
  height: 60px;
  width: 60px;
  margin-left: 1%;
  margin-top: 10px;
  border-radius: 50%;
}
#elImage {
  height: 510px;
  display: flex;
  flex-direction: column;
}
#title {
  color: #fcdd44;
  font-size: 70px;
  font-family: "FangSong";
  margin-top: 8%;
}
#subTitle {
  color: #fff;
  font-size: 70px;
  font-family: "FangSong";
}
.typeCard {
  width: 350px;
  height: 430px;
  position: absolute;
  top: 75%;
  margin-left: 11%;
}
.cardImage {
  width: 350px;
  height: 350px;
}
.cardButton {
  margin-top: 5%;
  width: 120px;
  font-size: 22px;
  /* background-color: #fde56b; */
  border: solid #fde56b 1px;
  font-weight: lighter;
  font-family: "Meiryo UI";
}
.cardButton:hover {
  /* background-color: #ff720b; */
  scale: 1.2;
  font-weight: lighter;
}
.cardButton1 {
  margin-top: 5%;
  width: 120px;
  /* background-color: #70eca2; */
  font-size: 22px;
  border: solid #70eca2 1px;
  font-weight: lighter;
  font-family: "Meiryo UI";
  font-weight: lighter;
}
.cardButton1:hover {
  /* background-color: #df26d5; */
  scale: 1.2;
  font-weight: lighter;
}
.cardButton2 {
  margin-top: 5%;
  width: 120px;
  /* background-color: #f49487; */
  font-size: 22px;
  border: solid #f49487 1px;
  font-weight: lighter;
  font-family: "Meiryo UI";
  font-weight: lighter;
}
.cardButton2:hover {
  /* background-color: #7317dd; */
  scale: 1.2;
  font-weight: lighter;
}
.thread {
  position: relative;
  width: 31.6%;
  height: 15px;
  border-top: solid #acc0d8 3px;
  border-bottom: solid #acc0d8 3px;
  margin-right: 8%;
  margin-top: 1.5%;
}
.thread1 {
  position: relative;
  width: 31.6%;
  height: 15px;
  border-top: solid #acc0d8 3px;
  border-bottom: solid #acc0d8 3px;
  margin-left: 8%;
  margin-top: 1.5%;
}
.threadTitle {
  font-size: 36px;
  color: #333333;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
}

.subText {
  width: 180px;
  overflow-wrap: break-word;
  margin: auto;
  margin-top: 16%;
}

.subButton {
  border-top: solid #acc0d8 1px;
  text-align: center;
  padding-top: 5%;
}

.subButtonTitle {
  color: #000;
  text-transform: uppercase;
}
.subButtonTitle:hover,
.subButtonTitle:focus {
  color: #ff720b;
}
</style>
